<template>
	<zui-box class="box">
		<!-- 邀请好友头部 -->
		<zui-navbar title=" " bg="transparent"></zui-navbar>
		<u-gap height="100rpx"></u-gap>
		<view class="big_title">中森珠宝</view>
		<u-gap height="10rpx"></u-gap>
		<view class="sm_title">邀请好友</view>
		<u-gap height="80rpx"></u-gap>
		<view class="code_box">
			<u-gap height="100rpx"></u-gap>
			<view class="avatar_box"><zui-avatar size="120rpx" :src="info.avatar"></zui-avatar></view>
			<u-gap height="18rpx"></u-gap>
			<view class="code_title">邀请好友</view>
			<u-gap height="18rpx"></u-gap>
			<view class="code_bum">{{ info.invite_code }}</view>
			<u-gap height="32rpx"></u-gap>
			<view class="code_img" v-if="uQRCode">
				<u-qrcode ref="qrcode" size="120" canvas-id="qrcode" :value="uQRCode"></u-qrcode>
			</view>
			<u-gap height="50rpx"></u-gap>
			<u-button type="warning" shape="circle" size="small" text="邀请好友" @click="copydata()"></u-button>
		</view>
	</zui-box>
</template>

<script>
export default {
	data() {
		return {
			uQRCode: '',
			info: {}
		};
	},
	onShow() {
		this.getinfo();
	},
	methods: {
		getinfo() {
			uni.$u.http
				.get('/app/user/getInviteQrCode', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					this.info = res;
					// this.uQRCode = `${this.wwwPath}/#/pages/login/register_html?code=${res.invite_code}`;
					this.uQRCode = `http://www.wbhshop.2022fly.com/#/pages/login/register_html?code=${res.invite_code}`
				})
				.catch(err => {}); 
		},
		copydata(data) { 
			// uni.setClipboardData({
			// 	data: this.uQRCode,
			// 	success: function() {
			// 		console.log('success');
			// 	}
			// });
			uni.setClipboardData({ 
				data: this.uQRCode, //要被复制的内容
				success: () => { //复制成功的回调函数
					uni.showToast({ //提示
						title: "链接复制成功"
					})
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100vh;
	background-image: url('~@/static/img/friends_bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
	position: relative;
}

.big_title {
	font-size: 90rpx;
	color: #fff;
}

.sm_title {
	width: 260rpx;
	height: 68rpx;
	line-height: 68rpx;
	background: #ffffff;
	border-radius: 34rpx;
	font-size: 44rpx;
	color: #e11a18;
	margin: 0 auto;
}

.code_box {
	width: 620rpx;
	min-height: 900rpx;
	background-image: url('~@/static/img/frider_icon.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

.avatar_box {
	display: flex;
	justify-content: center;
}

.code_title {
	font-size: 28rpx;
	color: #333;
}

.code_bum {
	font-size: 70rpx;
	color: #333;
}

.code_img {
	border-radius: 8rpx;
	padding: 30rpx;
	box-sizing: border-box;
	background: #fff;
	// border: 20rpx solid #fff;
	// width: 280rpx;
	// height: 280rpx;
	
	display: inline-block;
}

/deep/.u-button--warning {
	display: initial !important;
	padding: 14rpx 56rpx !important;
}
</style>
